<template>
  <el-container class="wrapper">
    <el-aside style="width:auto">
      <div class="logo">LOGO</div>
      <div class="menu-taggle" @click.prevent="collapse">
        <i class="el-icon-d-arrow-left" v-show="!collapsed"></i>
        <i class="el-icon-d-arrow-right" v-show="collapsed"></i>
      </div>
      <!--左侧导航 nav-->
      <el-menu :default-active="defaultActiveIndex" router :collapse="collapsed" @select="handleSelect" >
        <template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">
            <el-submenu v-if="!item.leaf" :index="index+''" :key="item.name">
              <template slot="title"><i :class="item.iconCls"></i><span slot="title">{{item.name}}</span></template>
              <el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" v-if="term.menuShow" :to="{name:item.name,params:{msg:item.name}}"
                            :class="$route.path==term.path?'is-active':''">
                <i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path" :key="item.name"
                          :class="$route.path==item.children[0].path?'is-active':''">
              <i :class="item.iconCls"></i><span slot="title">{{item.children[0].name}}</span>
            </el-menu-item>
          </template>
      </el-menu>
    </el-aside>
    <el-container>
        <el-header>
          <div class="line">Header</div>
          <div class="topbar-account">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <i class="el-icon-location"></i> 用戶名称 <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="jumpTo('/user/profile')">个人信息</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="jumpTo('/user/changepwd')">修改密码</div>
                </el-dropdown-item>
                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-main>
    </el-container>
  </el-container>
</template>

<style>
.logo{
  text-align:center;line-height:60px;height: 60px; background: #409EFF;color: #FFF;
}
.menu-taggle{
  cursor:pointer;line-height: 20px; text-align:center
}
.menu-taggle:hover{
  opacity: .8;
}
.el-menu{ width: 200px;}
.el-menu.el-menu--collapse{ width:auto; }
.topbar-account{
  float: right;
  padding-right: 12px;
  color: #FFF;
}
.topbar-account .el-dropdown{ color: #FFF;cursor: pointer;}
.line{ display: inline-block;}
</style>

<script>

export default {
  name: 'home',
  created () {
  },
  data () {
    return {
      defaultActiveIndex: 0,
      nickname: '',
      collapsed: false
    }
  },
  methods: {
    handleSelect (index) {
      this.defaultActiveIndex = index
    },
    collapse: function () {
      this.collapsed = !this.collapsed
    },
    jumpTo (url) {
      this.defaultActiveIndex = url
      this.$router.push(url)
    }
  },
  mounted () {
  }
}
</script>
